:root{

 --body-bg-color: #8EACCD;
 --text-color: rgb(217, 220, 219);
 
 --header-wrapper-bg-color: rgba(149, 79, 152, 1);
 --header-wrapper-height: 3px;
 
 --nav-menu-bg-color: rgba(149, 79, 152, .65); 
 --nav-menu-accent-color: #1C6EA4;
 --nav-menu-fonts: 'Parisienne', serif; /*font-size:1.8em*/; 
 
 --section-title-bg-color: rgba(149, 79, 152, .65);
 --section-accent-color: rgba(106,57,185, 0.7);
 --section-title-fonts: 'Parisienne', serif; /*font-size:1.8em*/; 
 --footer-bg-color: #954f98;
}

  /*layout adjustments*/
  #navigation{top: 0; padding:5px 0;}
  #feature{padding-top: 50px;}
  /*.sectiontitles{margin-top: 40px;}*/
  
  .parisienne-regular {
  font-family: "Parisienne", serif;
  font-weight: 400;
  font-style: normal;
}

.music_item:hover {background-color: peachpuff; border-radius: 15px;}
  
iframe{border: none;}

body {
  margin: 0;
  padding: 0;
  position:relative;
  z-index:-1;
  overflow-x: hidden;
  font-size: 1em;
  line-height: 1.5;
  font-family: 'Open Sans';
  background-color: var(--body-bg-color);
  min-width:320px;  
}

 
ul{
  list-style-type: none;
  padding-inline-start: 0;
}

p{font-size:1.2em;}

/*a {font-family: var(--nav-menu-fonts);}*/

a:link {color:var(--text-color);}
a:visited {color:var(--text-color);}
a:hover {color:silver;}
a:active {color:var(--text-color);}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}

.sectiontitles a:link {color:var(--text-color);}
.sectiontitles a:visited {color:var(--text-color);}
.sectiontitles a:hover {color:silver;}
.sectiontitles a:active {color:var(--text-color);}
.sectiontitles a:link {text-decoration: none;}
.sectiontitles a:visited {text-decoration: none;}
.sectiontitles a:hover {text-decoration: underline;}
.sectiontitles a:active {text-decoration: underline;}

main a {text-decoration: none; font-style: italic;}
main a:link {color:blue;}
main a:visited {color:black;}
main a:hover {color:red;}
main a:active {color:black;}


/************Header and Nav ******************/
/************ includes/banner.php ******************/
 .header-wrapper{
  background-color: var(--header-wrapper-bg-color);
  color: var(--text-color);
  width: 100%;
}

/*
 #logo{
   position:fixed;
   top: 10px;
   padding-top:0px;
   min-width:150px;
   min-height:40px;  
   background-position: left;
   background-image:url('../../static/img/vjlogo_small.png');
   background-repeat: no-repeat;

   z-index:999;
   
 }
*/

 .head_newsletter{font-family: var(--nav-menu-fonts); font-size:1em; padding: 4px 2vw;}

 /************ includes/nav.php ******************/
 
 #navigation{
   width:100%; 
   position:fixed; 
   top: var(--header-wrapper-height); 
   left:0; 
   z-index:9999;
  
 }
 
 ul#menu {
   padding-inline-start:0px;
   margin-block-start: 0em;
   list-style-type: none;
   text-align: center; 
   margin: auto;
   background-color:  var(--nav-menu-bg-color);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;   
 }

 #menu li {
   font-family: var(--nav-menu-fonts);
   font-size:1.8em;
   display: inline-block; 
   padding: 10px 6px;
   margin: 0 4px;
   a {font-family: var(--nav-menu-fonts);}
 }

 /* nav menu active and pop effect */
 .topmenu ul li.active a, .topmenu ul li a:hover{
   border-bottom: 5px outset var(--nav-menu-accent-color);
   border-left: 1px outset var(--nav-menu-accent-color);
   border-radius: 10px;
   padding-left:12px;
   padding-right:12px;
   padding-bottom:4px;
   //font-family: var(--nav-menu-fonts);
  }

 .menuitem{z-index:56;}
 
 @media screen and (max-width: 768px) {#menu li {font-size: 75%; margin: 0 2px;} /*#noHome{display:none;}*/ }
 @media screen and (max-width: 393px ) {#menu li {font-size: 75%; margin: 0 2px; padding-left: 0px; } }
 @media screen and (max-width: 320px ) {#menu li {font-size: 75%;} }
 @media screen and (max-width: 280px ) {#menu li {font-size: 60%;} }

/************END Header and Nav ******************/


main {display:block; background-color:var(--body-bg-color); width:100%; margin:auto; min-width:320px;}

.main-artwork{width:70%; margin: 0 auto;}
#feature-prod {bottom:140px;}




.title-wrapper hr { width:60%; margin:auto; padding-top: 140px; 
     margin-top: -140px;}



.sectiontitles{
  /*margin-top: 0;*/
  background-color:var(--section-title-bg-color);
  a {font-family: var(--nav-menu-fonts);} 
  font-size:1.8em;  
  border-radius: 8px;
  width:100%;
  font-family: var(--section-title-fonts); 
  text-align: center; 
  /*color: white;*/
  color: var(--text-color);
  border-bottom: 5px outset var(--nav-menu-accent-color);
  border-left: 1px outset var(--nav-menu-accent-color);
  border-radius: 10px;
}
  
/* css for includes/recordings file and badges */ 
.badgetitle h2 {text-align: center;} 
.streamingbadges hr {width: 80%; margin:auto;} 
.streamingbadges:hover {background-color:  #36454F; border-radius: 25px;}    
.coverart{display: block; width: 250px; height:250px; margin: 15px auto; border-radius: 5px;}
.streamingbadges {display: table; width:70%; margin: 0 auto; padding-top:50px; text-align:center;}
.badgelist li {display: inline;}

 #footerwrapper{
   width:100%; 
   background-color: var(--footer-bg-color);
   padding-top:30px;
   padding-bottom:50px; 
   opacity:.6; 
   z-index:9999;
   border-top-color: var(--section-accent-color);
   border-top-width: medium;
   border-top-style: solid; 
 }
 
 li.foot_icon {
   display: inline; 
   width:32px; 
   padding: 0 2px;
 }
 
 .foot_icon img{
   border-bottom: 5px outset transparent;
   border-left: 1px outset transparent;
   border-radius: 10px;
 }
    
 .foot_icon img:hover{
   border-color: var(--nav-menu-accent-color);
   padding-bottom:7px;
 }

 .schCopyright{
   width:100%; 
   text-align:center; 
   /*color:white;*/
   color: var(--text-color); 
   font-size:.7em;
 }


 /************ css for includes/video.php ******************/
 
#vidcontainer{margin:auto; text-align:center;}
#featurevid{width: 80%; margin: 0 auto;}
#vidcontainer-group{width: 80%; margin:auto; display: flex; flex-wrap: wrap;}
#vidcontainer-group li{width:33%; margin:auto; min-width:244px; padding:2px; display:inline;}

  @media screen and (max-width: 480px) {
   .main-artwork {width:100%;}
   #vidcontainer {width:100%; margin-left:0; padding-left:0;}
   #vidcontainer li {width:90%; padding:10px 0;}
   #vidcontainer-group {width:100%; margin-left:0; padding-left:0;}
  }